<template>
    <!--对垒悬浮框-->
    <div class="stand-facing positionAbCenter">
        <!--<div class="stand-facing-content positionRCT">-->
        <div class="stand-facing-content" ref="Vote">
            <div class="">
                {{interactMsg.title}}
            </div>
            <ul class="vote-list">
                <li class="vote-item positionR" v-for="(value,key) in interactMsg.interactOptions" @click="doVote(key,value.id)">
                    <span v-if="isChoise && choiseIndex == key" class="icon-wrap" :style="{'background-color':choiseColor(key)}"><span class="iconfont icon-dui1"></span></span>
                    <div class="vote-citem displayFlex justifyCtBwt positionR">
                        <span class="vote-citem-text">{{numberChangeLetter(key)}}.{{value.content}}</span>
                        <transition name="standAdd"
                                    leave-active-class="animated fadeOutUp">
                            <span v-if="choiseIndex == key && addIconShow" class="stand-add-one" :style="{'background-color':choiseColor(key)}">+1</span>
                        </transition>
                        <span class="vote-citem-text ticket-num" v-if="isChoise">
                            {{value.selectedNum >= 10000 ? parseInt(value.selectedNum/1000)/10 +"W":value.selectedNum}}票
                        </span>
                        <span v-if="!isChoise || interactMsg.isSelf" class="white-opacity-20 width-full border-radius5" ></span>
                        <span v-else class="white-opacity-20 border-radius5" :class="{transition03s:parseInt(interactMsg.interactOptions[key].width) > 0}" :style="{'width':value.width,'background-color':isChoise  && choiseIndex == key ? choiseColor(key) : '#fff'}"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Vote",
        props:{
            interactProp:Object
        },
        data(){
            return{
                choiseIndex:-1,
                addIconShow:false,
                totalNum:0,
                showWidth:false,
                isChoise:false,
                interactMsg:{
                    isSelf:false,/*@isSelf是否为自己发起的话题*/
                    interactId:0,//互动id
                    title:'',//互动标题
                    templateType:0,//对垒魔板
                    scale:1,//缩放比例
                    axisX:'',//话题出现的x轴位置
                    axisY:'',//话题出现的x轴位置
                    interactOptions:[
                        // {
                        //     "id": 1,
                        //     "optionLevel": 1,              //-----选项级别:统计-1，对垒1-对一个选项，2-对应第二个选项，互动选项依次往下推
                        //     "content": "算我一个",          //-----选项描述
                        //     "selectedNum": 0,              //-----该选项的选择人数
                        //     "width":0,                      //投票选项的长度
                        // }
                    ],
                    interactOptionId: 0                  //-----互动选中选项id:对应interactOptions里面的id
                }
            }
        },
        mounted() {
            let that = this;
            this.interactMsg = Object.assign({},this.interactMsg,this.interactProp);
            if(this.$refs.vote){
                this.$refs.vote.style.left = this.interactMsg.axisX + "%";
                this.$refs.vote.style.top = this.interactMsg.axisY + "%";
            }
        },
        methods:{
            numberChangeLetter(num){
                switch (num) {
                    case 0:return 'A';break;
                    case 1:return 'B';break;
                    case 2:return 'C';break;
                    case 3:return 'D';break;
                    case 4:return 'E';break;
                    case 5:return 'F';break;
                    case 6:return 'G';break;
                    default:return 'A';break;
                }
            },
            choiseColor(num){
                switch (num) {
                    case 0:return '#FF4040';break;
                    case 1:return '#FF9A40';break;
                    case 2:return '#FFD940';break;
                    case 3:return '#4AD23F';break;
                    case 4:return '#409EFF';break;
                    case 5:return '#8766FF';break;
                    case 6:return '#EE59FF';break;
                    default:return '#FF4040';break;
                }
            },
            doVote(key,choiseId){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                if(this.interactProp.isSelf){
                    this.$emit('recordList',this.interactProp.interactOptions[0].id);
                    return;
                }
                if( !this.isChoise ){
                    let that = this;
                    for( let value in that.interactMsg.interactOptions ){
                        if(that.interactMsg.interactOptions[value].id == choiseId){
                            that.interactMsg.interactOptions[value].selectedNum ++;
                        }
                        that.interactMsg.interactOptions[value].width = 0;
                        setTimeout(()=>{
                            that.interactMsg.interactOptions[value].width = that.interactMsg.interactOptions[value].selectedNum / that.totalNum * 100 +'%';
                        },300)
                        that.totalNum += that.interactMsg.interactOptions[value].selectedNum
                    }
                    that.choiseIndex = key;
                    that.addIconShow =true;
                    that.isChoise = true;
                    that.$emit('joinTHeme',choiseId);
                    setTimeout(()=>{
                        that.addIconShow = false;
                    },350)
                }

            },
        },
        watch:{
            interactProp(val){
                this.interactMsg = Object.assign({},this.interactMsg,val)
                if(this.$refs.vote){
                    this.$refs.vote.style.left = this.interactMsg.axisX + "%";
                    this.$refs.vote.style.top = this.interactMsg.axisY + "%";
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    .stand-facing{
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        top: 25%;
        bottom: auto;

    }
    .stand-facing-content{
        padding: .15rem .05rem .1rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 2.4rem;
        text-align: center;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        background-color: rgba(0,0,0,.1);
        color: #fff;
        font-size: .18rem;
        position: relative;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .stand-facing-button{
        width: 1.2rem;
        height: .4rem;
        line-height: .4rem;
        background-color: rgba(255,255,255,.4);
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        margin-top: .1rem;
    }
    .white-opacity-20{
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        opacity: .2;
        background-color: rgb(255,255,255);
        width: 0;
        height: .4rem;
        z-index: 1;
    }
    .vote-list{
        padding: .1rem;
    }
    .vote-citem{
        margin-top: .1rem;
        padding-left: .1rem;
        line-height: .4rem;
        height: .4rem;
        text-align: left;
        width: 100%;
    }
    .vote-citem-text{
        position: relative;
        z-index: 2;
        color: #fff;
        font-size: .15rem;
    }
    .ticket-num{
        font-size: .12rem;
    }
    .stand-add-one{
        position: absolute;
        right: 35%;
        bottom: 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #fff;
        background-color: #18CEF2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: .24rem;
        line-height: .2rem;
        height: .24rem;
        font-size: .1rem;
        white-space: nowrap;
    }
    .icon-wrap{
        position: absolute;
        left: -.12rem;
        top: -.09rem;
        display: inline-block;
        width: .18rem;
        height: .18rem;
        line-height: .16rem;
        margin: 0 .05rem;
        border-radius: 50%;
        color: #fff;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        .icon-dui1{
            font-size: .1rem;
        }
    }
</style>